<template>
	<view class="user-fans-box">
		<view class="header bg-white">
			<view class="">
				<h3 class="u-padding-left-15 u-padding-top-15 u-text-center">团队数据概览</h3>
				<view class="row u-padding-top-25 u-padding-bottom-25">
					<view class="u-flex-1 u-text-center">
						<view class="bold u-padding-bottom-5">{{nowDayPromotion||0}}</view>
						<view class="bold">今日推广</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="bold u-padding-bottom-5">{{nowDayPromotionSuccess||0}}</view>
						<view class="bold">今日进件</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="bold u-padding-bottom-5">{{sumPromotion||0}}</view>
						<view class="bold">总推广</view>
					</view>
					<view class="u-flex-1 u-text-center">
						<view class="bold u-padding-bottom-5">{{sumPromotionSuccess||0}}</view>
						<view class="bold">总进件</view>
					</view>
				</view>
			</view>
			<u-search v-model="keyword" shape="round" background="white" :show-action="true" action-text="确定"
				placeholder="请输入搜索关键词 姓名/产品名称/下级姓名" @search="onSearch" @custom="onSearch" @clear="onSearch" />
			<u-dropdown>
				<u-dropdown-item @change="sortStatusChange('type')" v-model="type" title="类型" :options="typeOptions"></u-dropdown-item>
				<u-dropdown-item @change="sortStatusChange('status')" v-model="status" title="状态" :options="statusOptions"></u-dropdown-item>
			</u-dropdown>
		</view>
		<view class="content">
			<view class="data-null" v-if="false">
				<view class="muted">暂无相关数据...</view>
			</view>
			<view v-else class="card-box">
				<view v-for="(item, index) in fansObject" :key="index" class="card-item  product-basics-info-area">
					<view class="card-item-header u-padding-bottom-20 u-text-right u-border-bottom">
						<view class="u-padding-bottom-10" style="color: #ff9900;">
							团队:{{item.member_name||''}}
						</view>
					</view>
					<view class="row-between  product-basics-info u-padding-bottom-25 u-margin-top-25">
						<image :src="item.image" mode="scaleToFill" class="logo u-margin-left-15"></image>
						<view class="u-flex-1 u-padding-left-15 product-name">
							<view class="xl bold u-line-1">
								{{item.title||''}}
							</view>
							<view class="row u-margin-top-20 u-text-center"
								v-if="item.settlement_interval || item.scope_credit">
								<view class="u-padding-right-20" v-if="item.settlement_interval">
									<view class="xl bold red">{{item.settlement_interval||''}}</view>
									<view class="xs">结算周期</view>
								</view>
								<view v-if="item.scope_credit">
									<view class="xl bold red">{{item.scope_credit||''}}</view>
									<view class="xs">授信范围</view>
								</view>
							</view>
						</view>
					</view>
					<view class="u-padding-top-20 u-font-sm tips-color">
						<view class="u-padding-top-5">姓名:{{item.name||''}}</view>
						<view class="u-padding-top-5">类型:{{item.type_txt||''}}</view>
						<view class="u-padding-top-5">手机号:{{item.phone||''}}</view>
						<view class="u-padding-top-5">身份证:{{item.id_code||''}}</view>
						<view v-if="item.is_open == 0 && item.status == 0" style="color: #c0c4cc;" class="u-padding-top-5">申请状态:{{item.status_txt||''}}</view>
						<view v-else-if="item.status == 0" style="color: #ff9900;" class="u-padding-top-5">申请状态:{{item.status_txt||''}}</view>
						<view v-else-if="item.status == 1" style="color: #19be6b;" class="u-padding-top-5">申请状态:{{item.status_txt||''}}</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png"></image>
						<text>暂无相关数据...</text>
					</view>
				</loading-footer>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadingType,
		SortType,
		FansType
	} from '@/utils/type';
	import {
		getTeamCustomer,
		getTeamCustomerOverview
	} from '@/api/user';
	import {
		loadingFun
	} from '@/utils/tools'

	export default {
		data() {
			return {
				active: FansType.ALL,
				loadingStatus: loadingType.LOADING,
				sortType: 0,
				keyword: "",
				page: 1,
				fansObject: [],
				nowDayPromotion: 0,
				sumPromotion: 0,
				nowDayPromotionSuccess: 0,
				sumPromotionSuccess: 0,
				type: -1,
				status: -1,
				typeOptions: [{
						label: '全部',
						value: -1,
					},
					{
						label: '个人',
						value: 0,
					},
					{
						label: '企业',
						value: 1,
					}
				],
				statusOptions: [
					{
						label: '全部',
						value: -1,
					},
					{
						label: '未打开',
						value: 0,
					},
					{
						label: '未进件',
						value: 1,
					},
					{
						label: '已进件',
						value: 2,
					}
				],
			};
		},


		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getTeamCustomerFun();
			this.getTeamCustomerOverviewFun();
		},

		onReachBottom() {
			this.getTeamCustomerFun();
		},

		methods: {
			onSearch() {
				this.cleanStatus();
				this.getTeamCustomerFun();
			},

			// 获取粉丝列表
			getTeamCustomerFun() {
				const {
					type,
					status,
					loadingStatus,
					keyword,
					fansObject,
					page,
				} = this;
				const inputData = {
					keyword,
					type,
					status
				};

				loadingFun(getTeamCustomer, page, fansObject, loadingStatus, inputData).then(res => {
					if (res) {
						console.log(res)
						this.page = res.page;
						this.fansObject = res.dataList
						this.loadingStatus = res.status
					}
				})
			},
			async getTeamCustomerOverviewFun(){
				let {
					data
				} = await getTeamCustomerOverview();
				this.nowDayPromotion = data.nowDayPromotion;
				this.sumPromotion = data.sumPromotion;
				this.nowDayPromotionSuccess = data.nowDayPromotionSuccess;
				this.sumPromotionSuccess = data.sumPromotionSuccess;
				
			},

			// 清理状态
			cleanStatus() {
				this.loadingStatus = loadingType.LOADING;
				this.fansObject = [];
				this.page = 1
			},

			// 排序状态变化 
			sortStatusChange(e) {
				this.cleanStatus();
				this.getTeamCustomerFun();
			}

		}
	};
</script>
<style lang="scss">
	/* pages/user_fans/user_fans.wxss */
	.user-fans-box {
		.header {
			top: 0;
			z-index: 1999;
			position: sticky;
			box-shadow: 1px 1px 8px #e0e0e0;

			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					line-height: 34rpx;
					height: 100%;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 100rpx;
					height: 100%;
				}
			}

			.sort-bar {
				background-color: white;
				height: 80rpx;

				.sort-bar-item {
					flex: 1;
					line-height: 40rpx;
					height: 100%;

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		.data-null {
			padding-top: 200rpx;
			line-height: 40rpx;
		}

		.card-box {
			margin-top: 20rpx;

			.card-item {
				padding: 20rpx;
				background-color: white;

				.card-img {
					width: 100rpx;
					height: 100rpx;
					flex: none;
				}

				.fans-info {
					.fans-name {
						line-height: 44rpx;
					}
				}

				.msg {
					line-height: 32rpx;
					text-align: right;
				}

				&:not(:nth-last-of-type(3)) {
					border-bottom: $-solid-border;
				}
			}
		}
	}

	.product-basics-info-area {

		margin: 10px 10px 0;
		padding: 10px 10px 0;
		border-radius: 5px;

		.product-basics-info {
			border-bottom: 2rpx solid #eee;

			.logo {
				height: 100rpx;
				width: 100rpx;
			}

			.red {
				color: red;
			}
		}


	}
</style>